// @import url('@/assets/styles/font.less');

.bookpage {
  min-height: 100vh;
  background-color: #FDEBFD;
  position: relative;
  .backicon {
    width: 60rpx;
    height: 60rpx;
    position: fixed;
    left: 40rpx;
    margin-top: 10rpx;
    z-index: 100;
  }
  .tip_p1 {
    padding-top: 60px;
    font-family: 'PingFangSC,PingFang SC';
    font-weight: 600;
    font-size: 42rpx;
    color: #FC65B8;
    line-height: 98rpx;
    text-align: center;
    width: 640rpx;
    margin: auto;
    animation: upshow 1s;
    opacity: 0.8;
  }
  .toptitle {
    width: 515rpx;
    height: 51rpx;
    margin: 15rpx 0;
    transform: scale(0.7);
    position: fixed;
    left: calc(50% - 266rpx);
  }
  .twocard {
    display: flex;
    padding: 40px 24px 0 24px;
    justify-content: space-between;
  }
  .cardcn {
    width: 284rpx;
    height: 474rpx;
    border-radius: 24rpx;
    
  }
  .cardcnAnimation {
    animation: rotate3D 1s infinite linear; // 添加动画
    // 添加3D效果
    transform-style: preserve-3d;
  }

  .twoText {
    display: flex;
    padding: 10px 24px 0 24px;
    justify-content: space-between;
  }
  .textP {
    width: 284rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #FC65B8;
  }
  .buttonstart {
    width: 640rpx;
    height: 120rpx;
    background: #FC65B8;
    border-radius: 60rpx;
    color: #fff;
    font-size: 40rpx;
    font-weight: 500;
    line-height: 120rpx;
    text-align: center;
    margin: 80px auto 0;
    opacity: 0.8;
  }
}

// 定义3D旋转动画
@keyframes rotate3D {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}